<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .a {
            margin-top: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .head,
        .commodity,
        .univalence,
        .quantity,
        .subtotal,
        .operation,
        .heads,
        .commoditys,
        .univalences,
        .quantitys,
        .subtotals,
        .operations {
            width: 100px;
            height: 50px;
            border: 1px rgb(112, 97, 97) solid;
            display: inline-block;
            text-align: center;
            line-height: 50px;
        }

        .commodity,
        .commoditys {
            width: 500px;
        }

        .univalence,
        .univalences {
            width: 200px;
        }

        .quantity,
        .quantitys {
            width: 150px;
        }

        .subtotal,
        .subtotals {
            width: 250px;
        }

        .operation,
        .operations {
            width: 150px;
        }

        .b {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .heads,
        .commoditys,
        .univalences,
        .quantitys,
        .subtotals,
        .operations {
            height: 200px;
            line-height: 200px;
        }

        img {
            width: 180px;
            height: 160px;
            margin-top: 20px;
        }

        .commoditys {
            display: flex;
            justify-content: center;

        }

        .amount {
            padding: 0 10px;
            border: 1px rgb(117, 105, 105) solid;
        }

        .c {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 50px;
        }

        .digit {
            color: red;
        }

        .footing {
            margin-left: 10px;
        }

        .c1 {
            border: 1px rgb(112, 97, 97) solid;
            padding: 14px 4px 14px 0;
        }

        .c2 {
            width: 150px;
            height: 50px;
            border: 1px rgb(112, 97, 97) solid;
            line-height: 50px;
            text-align: center;
        }

        .delete {
            margin-left: 948px;
        }

        .quantitys {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .quantitys span {
            width: 20px;
            height: 26px;
            line-height: 26px;
            background-color: #ff0;
        }

        .quantitys .off {
            background-color: #ddd;
        }
    </style>
</head>

<body>
    <div class="cart">
        <div class="a">
            <span class="head">
                <input type="checkbox" class="cheone">全选
            </span>
            <p class="commodity">
                <span>商品</span>
            </p>
            <p class="univalence">
                <span>单价</span>
            </p>
            <p class="quantity">
                <span>数量</span>
            </p>
            <p class="subtotal">
                <span>小计</span>
            </p>
            <p class="operation">
                <span>操作</span>
            </p>
        </div>
        <ul>
            <li class="b">
                <span class="heads">
                    <input type="checkbox" class="chetwo">
                </span>
                <p class="commoditys">

                    <img src="https://img.alicdn.com/imgextra/i1/1063900183/O1CN01sedFOL1DDrESKBiB9_!!2-saturn_solar.png_468x468q75.jpg_.webp"
                        alt="">
                    <span class="">Casio/卡西欧EX-TR350</span>

                <p class="univalences">
                    <span>5999.88</span>
                </p>
                <p class="quantitys">
                    <span class="off reduce"></span>
                    <!-- <span class="amount">
                        1
                    </span> -->
                    <input type="text" class="amount" value="1" style="width:40px ;">
                    <span class="add">+</span>
                </p>
                <p class="subtotals">5999.88</p>
                <p class="operations">
                    <span d="d">删除</span>
                </p>
            </li>
            <li class="b">
                <span class="heads">
                    <input type="checkbox" class="chetwo">
                </span>
                <p class="commoditys">

                    <img src="https://img.alicdn.com/imgextra/i1/1063900183/O1CN01sedFOL1DDrESKBiB9_!!2-saturn_solar.png_468x468q75.jpg_.webp"
                        alt="">
                    <span class="">Casio/卡西欧EX-TR350</span>

                <p class="univalences">
                    <span>3888.67</span>
                </p>
                <p class="quantitys">
                    <span class="off reduce"></span>
                    <span class="amount">
                        1
                    </span>
                    <span class="add">+</span>
                </p>
                <p class="subtotals">3888.67</p>
                <p class="operations">
                    <span d="d">删除</span>
                </p>
            </li>
            <li class="b">
                <span class="heads">
                    <input type="checkbox" class="chetwo">
                </span>
                <p class="commoditys">

                    <img src="https://img.alicdn.com/imgextra/i1/1063900183/O1CN01sedFOL1DDrESKBiB9_!!2-saturn_solar.png_468x468q75.jpg_.webp"
                        alt="">
                    <span class="">Casio/卡西欧EX-TR350</span>

                <p class="univalences">
                    <span>3456.66</span>
                </p>
                <p class="quantitys">
                    <span class="off reduce"></span>
                    <span class="amount">
                        1
                    </span>
                    <span class="add">+</span>
                </p>
                <p class="subtotals">3456.66</p>
                <p class="operations">
                    <span d="d">删除</span>
                </p>
            </li>
        </ul>
        <div class="c">
            <p class="c1">
                <span class="del">删除</span>
                <span class="delete">
                    <span>已选商品
                        <span class="digit">2</span>
                        件
                    </span>
                    <span class="footing">
                        合计：￥
                        <span class="m">1234</span>
                    </span>
                </span>
            </p>
            <p class="c2">结算</p>
        </div>
    </div>



    <h1 style="display: none;">购物车空空</h1>

    <script>

        // 事件委托的
        //    区分 this和target    this指向绑定事件的对象    target指向具体的子元素




        var oCart = document.querySelector('.cart');   // 如果在写代码过程中不断的获取元素，会非常消耗性能
        // 全选
        var oAll = oCart.querySelector('.cheone');
        // 所有的单选
        var oOnes = oCart.querySelectorAll('.chetwo');  // 3
        // 删除
        var oDels = oCart.querySelectorAll('.operations span');
        // 批量删除
        var oDelAll = oCart.querySelector('.del');
        // 加
        var oAdds = oCart.querySelectorAll('.add');
        // 减
        var oJians = oCart.querySelectorAll('.reduce');
        // 显示数量
        var oDigit = oCart.querySelector('.digit');
        // 显示合计
        var oM = oCart.querySelector('.m');


        // 事件委托：  委托给合适的父元素

        oCart.addEventListener('click' , function(e) {
            var ev = e || event ;
            var target = ev.target || ev.srcElement ;

            // 全选
            if(target.className === 'cheone') {
                oOnes.forEach(function(v) {
                    v.checked = target.checked ;
                })
                return 
            }


            // 反选
            if(target.className === 'chetwo') {
                console.log(222);
                // ... 
                return  ;
            }


            // 删除
            if(target.getAttribute('d') === 'd') {
                target.parentElement.parentElement.remove() ;
            }



        })

    </script>


</body>

</html>